<template>
	<view class="box">
		<view class="top">
			<text>{{article.title}}</text>
		</view>
		<view class="content" v-for="(item,index) in article.contents" :key="index">
			<view class="icon">
				<image :src="item.icon" mode="widthFix"></image>
			</view>
			
			<view class="address">
				<text class="pre_label">From: </text><text> {{item.address}}</text>
			</view>
			<view class="study">
				<text class="pre_label">专业: </text><text> {{item.study}}</text>
			</view>
			<view class="characters">
				<text class="pre_label">爱好: </text><text> {{item.characters}}</text>
			</view>	
			<view class="require">
				<text class="pre_label">择偶要求: </text><text> {{item.require}}</text>
			</view>
			<view class="phone">
				<text class="pre_label">联系电话: </text><text> {{item.phone}}</text>
			</view>	
		</view>
	</view>
</template>

<script>
	import datas from "../../../datas/data.json"
	export default {
		data() {
			return {
				article:""
			}
		},
		onLoad(options) {
			let index=options.index;
			this.article=datas.articles[index];

		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.box{
		margin: 8% 0;
		padding: 3%;
		width: 100%;
	}
	.top{
		text-align: center;
		font-size: 18px;
		font-weight: bolder;
	}
	.content{
		margin: 2% auto;
		width: 80%;
		background: #fff;
		border-radius: 10x 10px;
		padding: 3%;
	}
	.content view{
		width: 80%;
		margin: 2% auto;
	}
	.address{
		margin-top: 4% !important;
		padding-top: 3%;
		border-top: #007AFF solid 1px;
	}
	.pre_label{
		background: #fc007d !important;
		color: white;
	}
</style>
